<template>
	<view class="main_containter">
		<view class="main" @touchstart="touchStartEvent" @touchend="touchEndEvent">
			<view class="top">
				<text class="text-num">{{current_index + 1}}/{{wordData.length}}</text>
			</view>
			<view class="main">
				<view class="container">
					<view class="word" @click="clickWord">
						{{wordData[current_index].word}}
					</view>
					<view class="phonetic">
						{{wordData[current_index].translation.phonetic}}
					</view>
					<view class="translation" v-show="showTranslation">
						<view class="translation-item" v-for="item,idx in wordData[current_index].translation.translation" :key="idx">
							{{item.class}} {{item.ch}}
 						</view>
					</view>					
				</view>
			</view>
			<view class="foot"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 0,
				collection_id : 0,
				collection_data: "",
				wordData:[],
				current_index : -1,
				touchData:{},
				wordTranslation:{},
				showTranslation:false,
			}
		},
		methods: {
			async getCollectionDetail(id) {
				const res = await this.$Request({
					url:"collection/getDetail?collection_id=" + id
				})
				this.collection_data = res.data.data
				const words = this.collection_data.detial.split(",")
				words.forEach((w)=>{
					let tmp = {'word':w}
					this.wordData.push(tmp)
				})
				this.current_index = 0
			},
			touchStartEvent(e) {
				this.touchData.startX = e.changedTouches[0].clientX
				this.touchData.startY = e.changedTouches[0].clientY
			},
			touchEndEvent(e) {
				const subX = e.changedTouches[0].clientX - this.touchData.startX 
				const subY = e.changedTouches[0].clientY - this.touchData.startY
				if (subX < -100) {
					// 左滑动
					this.current_index ++
				}else if(subX > 100){
					// 右滑动
					if (this.current_index > 1)
					this.current_index --
					
				}
			},
			async searchWord() {
				
				if(this.wordData[this.current_index].translation == undefined){
					console.log(this.current_index);
					const res = await this.$Request({
						url:"translation/search?q=" + this.wordData[this.current_index].word
					})
					// Vue不能监听数组的改变。
					this.$set(this.wordData,this.current_index,{
						"word":this.wordData[this.current_index].word,
						"translation": res.data.data
					})
				}
				
				//预加载下个数据
				if(this.current_index < this.wordData.length - 1 || this.wordData[this.current_index + 1].translation != undefined){
					const res = await this.$Request({
						url:"translation/search?q=" + this.wordData[this.current_index + 1].word
					})
					this.wordData[this.current_index + 1].translation= res.data.data
				}
					
				
				
			},
			clickWord() {
				this.showTranslation = true
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.src = this.wordData[this.current_index].translation.pronounce
				innerAudioContext.play()
			}
			
			
			
		},
		// 这里不能使用ES6的箭头函数
		 onLoad: function(option) {
			this.mode = option.mode
			this.collection_id = option.collection_id
			this.getCollectionDetail(this.collection_id)
			
		},
		watch:{
			// 监听目前单词的改变
			current_index(value){
				this.searchWord()
				console.log(this.wordData);
				this.showTranslation = false
			}
		}
	}
</script>

<style>
.main{
	width: 100%;
	height: calc(100% - 40rpx);
}
.top{
	width: 100%;
	height: 40rpx;
	padding: 25rpx;
	box-sizing: border-box;
}
.top .text-num{
	color: #88ada6;
}
.container{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
	
}
.container .word{
	font-size: 30px;
	color: #003472;
	margin-top: 160rpx;
}
.container .phonetic{
	
	margin-top: 22rpx;
	color: #808080;
	font-size: 20px;
}
.translation{
	margin-top: 80rpx;
	padding: 0 80rpx;
}
.translation .translation-item{
	color: #161823;
	font-size: 18px;
	margin-top: 2px;
}
page,uni-page,html,body{
	height: 100%;
	background-color: #EEEEEE !important;
	overflow: hidden;
}
.main_containter{
	height: 100%;
}
</style>
